<template>
  <div class="app-container">
    菜单名称： <el-input style="width: 200px"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="menuName">
    </el-input>
    <el-button type="primary"
               style="margin: 20px"
               @click="selectMenu()">搜索</el-button>
    <el-button type="primary"
               style="margin: 20px"
               @click="resetForm()">重置</el-button>
    <el-button type="primary"
               @click="dialogFormVisible = true">添加</el-button>

    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column align="center"
                       label="ID"
                       width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="菜单名称"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.menuName }}
        </template>
      </el-table-column>
      <el-table-column label="url"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
      <el-table-column label="菜单等级"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.menuType }}
        </template>
      </el-table-column>
      <el-table-column label="菜单图标"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.icon }}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="created_at"
                       label="注册时间"
                       width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ new Date(scope.row.createDate).toLocaleDateString() }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"
                       label="操作"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <el-button type="success"
                     plain
                     @click="editor(scope.row)">编辑</el-button>
          <el-button type="danger"
                     plain
                     @click="deleteMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加菜单"
               :visible.sync="dialogFormVisible">
      <el-form :model="menu">
        <el-form-item label="菜单名称"
                      :label-width="formLabelWidth">
          <el-input v-model="menu.menuName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="URL"
                      :label-width="formLabelWidth">
          <el-input v-model="menu.url"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标"
                      :label-width="formLabelWidth">
          <icon-picker v-model="menu.icon"></icon-picker>
        </el-form-item>
        <el-form-item label="菜单等级"
                      :label-width="formLabelWidth">
          <el-select v-model="menu.menuType"
                     @change="getMenuList()"
                     placeholder="请选择菜单等级">
            <el-option label="1"
                       value="1"></el-option>
            <el-option label="2"
                       value="2"></el-option>
            <el-option label="3"
                       value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单"
                      :label-width="formLabelWidth">
          <el-select v-model="menu.parentId"
                     placeholder="请选择父级菜单">
            <el-option v-for="item in menuList1"
                       :key="item.menuId"
                       :label="item.menuName"
                       :value="item.menuId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="insertMenu()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改菜单"
               :visible.sync="dialogForm1Visible">
      <el-form :model="menu1">
        <el-form-item label="菜单名称"
                      :label-width="form1LabelWidth">
          <el-input v-model="menu1.menuName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="URL"
                      :label-width="form1LabelWidth">
          <el-input v-model="menu1.url"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标"
                      :label-width="formLabelWidth">
          <icon-picker v-model="menu1.icon"></icon-picker>
        </el-form-item>
        <el-form-item label="菜单等级"
                      :label-width="form1LabelWidth">
          <el-select v-model="menuType2"
                     placeholder="请选择菜单等级">
            <el-option label="1"
                       value="1"></el-option>
            <el-option label="2"
                       value="2"></el-option>
            <el-option label="3"
                       value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单"
                      :label-width="form1LabelWidth">
          <el-select v-model="parentId2"
                     placeholder="请选择父级菜单">
            <el-option v-for="item in menuList1"
                       :key="item.menuId"
                       :label="item.menuName"
                       :value="item.menuId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogForm1Visible = false">取 消</el-button>
        <el-button type="primary"
                   @click="updateMenu()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页插件 -->
    <div class="block"
         style="float:right">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageIndex"
                     :page-sizes="pageSizes"
                     :page-size.sync="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="Total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMenu, insertMenu, updateMenu, deleteMenu, getLevelMenu } from '@/api/menu/menu'

export default {
  filters: {
    statusFilter (status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      list: null,
      menuList: [],
      menuList1: [],
      menuId: "",
      needPage: true,
      listLoading: true,
      menuName: null,
      menuType: null,
      menuType1: "",
      menuType2: null,
      // sheltersAccount: null,
      parentId: null,
      parentId1: null,
      parentId2: null,
      // begin: null,
      // end: null,

      //分页
      currentPage: 1,
      Total: 0,
      pageIndex: 1,
      pageSize: 5,
      pageSizes: [5, 10, 15, 20],
      // sheltersIdList:"",
      // newName:"",
      dialogFormVisible: false,
      dialogForm1Visible: false,
      menu: {
        // userName: '',
        // areaId: '',
        // userPhone: '',
        // account: '',
        // userPassword: ''
        menuName: "",
        url: "",
        parentId: "",
        menuType: "",
        icon: ""
      },
      menu1: {
        menuName: "",
        url: "",
        parentId2: "",
        menuType: "",
        icon: ""
      },
      formLabelWidth: '120px',
      form1LabelWidth: '120px'
    }
  },
  created () {
    this.fetchData()
    this.iconList = elementIcons
    // this.getRegionList()
    // this.getMenuList()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      this.needPage = true
      getMenu(this.pageIndex, this.pageSize, this.menuName, this.needPage).then(response => {
        this.list = response.obj.list
        this.Total = response.obj.total
        this.listLoading = false
      })
    },
    getMenuList () {
      this.needPage = false
      this.pageIndex = null
      this.pageSize = null
      // if(menuType1 == 1){
      //   this.parentId1 = "0"
      // }
      getLevelMenu(this.menu.menuType - 1, this.pageIndex, this.pageSize, this.needPage).then(response => {
        // console.log(response)
        // console.log(this.menuType1)
        if (this.menu.menuType == 1) {
          console.log(1234567890987654321)
          this.menuList1 = []
          this.menu.parentId = "0"
          console.log(this.menu)
          // this.menu.parentId1 = "0"
        } else {
          this.menuList1 = response.obj.list
        }
        // this.menuList = response.obj.list

        // if(this.menuType1 == "1"){
        //   this.menuList1 = ""
        // }else{
        //   this.menuList1 = response.obj.list
        // }

        // console.log(this.sheltersList)
      })
    },
    // 查询管理员
    selectMenu () {
      this.needPage = true
      if (this.menuName == "") {
        alert("查询条件不能为空！")
        getMenu(this.pageIndex, this.pageSize, this.menuName, this.needPage).then(response => {
          this.list = response.obj.list
          localStorage.setItem("list",JSON.stringify(this.list))
          this.Total = response.obj.total
          this.listLoading = false
        })
      }

      // if(this.menuName != "" && this.menuType == ""){
      getMenu(this.pageIndex, this.pageSize, this.menuName, this.needPage).then(response => {
        this.list = response.obj.list
        this.Total = response.obj.total
        this.listLoading = false
      })
      // }

      // if(this.menuName == "" && this.menuType != ""){
      //   // this.selectByType()
      //   selectByType(this.pageIndex,this.pageSize,this.menuType).then(response =>{
      //   this.list = response.obj.list
      //   this.Total = response.obj.total
      //   this.listLoading = false
      // })
      // }

    },
    //重置查询条件
    resetForm () {
      this.menuName = null
      this.fetchData()
      // this.list = JSON.parse(localStorage.getItem("list"))
    },
    //增加管理员
    insertMenu () {
      // console.log(this.menuType1)
      // this.menu.menuType = this.menuType1
      // console.log(this.menu)
      insertMenu(this.menu).then(response => {
        let message = response.msg
        this.$message({
          type: 'success',
          message: message
        })
        this.menu.menuName = "",
          this.menu.url = "",
          this.menu.parentId1 = "",
          this.menu.menuType = "",
          this.menu.icon = ""
        this.dialogFormVisible = false
        this.fetchData()
      })
    },
    //编辑管理员
    editor (item) {
      this.dialogForm1Visible = true
      this.menuType2 = item.menuType
      this.menu1 = item
      this.parentId2 = item.parentId
      // console.log(item)
    },
    updateMenu () {
      updateMenu(this.menu1).then(response => {
        let message = response.msg
        this.$message({
          type: 'success',
          message: message
        })
        this.dialogForm1Visible = false
        this.fetchData()
      })
    },
    //删除管理员
    deleteMenu (item) {
      console.log(item)
      deleteMenu(item.menuId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.fetchData()
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数 
      this.pageSize = val
      // this.pageSize=val
      // 点击每页显示的条数时，显示第一页
      // this.fetchData.getRegionCheck(1,val,1)
      // 在改变每页显示的条数时，要将页码显示到第一页
      // this.pageIndex=1
      this.fetchData()
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.pageIndex = val
      // 切换页码时，要获取每页显示的条数
      // this.pageSize=val
      // this.pageSize = (val)*(this.pageSize)
      this.fetchData()
    },
    //icon
    popoverShow() {
      this.$nextTick(()=>{
        this.activeName = '0'
      })
    },
    setIcon(icon) {
      this.$set(this.form, 'icon', icon)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon_list {
  width: 100%;
  height: 320px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  i {
    display: inline-block;
    width: 60px;
    height: 45px;
    color: #000000;
    font-size: 20px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;

    &:hover {
      color: blue;
      border-color: blue;
    }
  }

  ::v-deep .el-tabs__content {
    height: 270px;
    overflow-y: scroll; 
    overflow-x: hidden;
  }
}
</style>